import React, { Component } from 'react';
import { Table, Message, Pagination } from '@alifd/next';
import IceContainer from '@icedesign/container';
import { page, del } from '../../../../../api/Session';
import '../../SessionTable.scss';
import DeleteBalloon from '../../../../../libs/DeleteBalloon';

export default class TreeTable extends Component {
  static displayName = 'TreeTable';

  static propTypes = {
  };
   myprops={};
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      sourceData: [],
      offset: 0,
      limit: 10,
      total: 10,
      refresh: false,
    };
    this.onChangePage = this.onChangePage.bind(this);
  }

  componentDidMount() {
    this.updateTable(this.state.offset, this.state.limit);
  }
  updateTable(offset, limit) {
    page({
      offset: offset,
      limit: limit,
    }).then((response) => {
      if (response.data.code === 200) {
        const data = response.data.data;
        this.setState({
          sourceData: data.rows,
          refresh: false,
          total: data.count,
        });
      }
    });
  }
  onChangePage = (cur) => {
    const offset = (cur - 1) * this.state.limit;
    this.updateTable(offset, this.state.limit);
    this.setState({
      offset: offset, 
    });
  }

  onConfirm = (id) => {
    del({
      sessionId: id,
    }).then((response) => {
      const data = response.data;
      if (data.code === 200) {
        Message.success('操作成功');
      } else {
        Message.warning(data.msg);
      }
    });
  }
  render() {
    const isZebra = true;
    const renderOpt = (value, index, record) => {
      return (
        <DeleteBalloon label="强退" icon="close" handleRemove={() => this.onConfirm(record.id)} />
      );
    };
    return (
      <IceContainer>
        <Table
          dataSource={this.state.sourceData}
          primaryKey="id"
          isZebra={isZebra}
          align="center"
          rowSelection={{ onChange: () => {} }}
        >
          <Table.Column title="会话id" dataIndex="id" />
          <Table.Column title="登录名" dataIndex="loginName" />
          <Table.Column title="登录ip" dataIndex="host" />
          <Table.Column title="登录时间" dataIndex="startTimestamp" />
          <Table.Column title="最后在线时间" dataIndex="lastAccessTime" />
          <Table.Column title="操作" cell={renderOpt} />
        </Table>
        <Pagination onChange={this.onChangePage} pageSize={this.state.limit} total={this.state.total} className="paging" />
      </IceContainer>
    );
  }
}
const styles = {
  contentText: {
    padding: '5px 0 15px',
  },
};

